<template>
    <div class="search-root">
        <div class="search-top">
           <div class="search-let">
            <img src="/img/search/资源3@2x-8.png" >
            <input type="text" placeholder="搜索你感兴趣的内容"
                 @touchstart="isShow" v-model="txt"
                 @change="shuru"
            >
           </div>
           <div class="cancel" @touchstart="pressClick"><span>取消</span></div>
        </div>

        <div class="search-bottom">
        <!-- 搜索之前 -->
           <div v-show="showbottom">
               <div class="search-before">
                   <span class="searb-text">搜索热词</span>
                   <span class="searb-img"></span>
                </div> 
                <div class="search-befor-bottom">
                    <span  class="dandu"
                        v-if="i<3"
                        v-for="(t,i) in searchtxt" :key="i"                    
                    >{{t}}</span>

                    <span 
                        v-if="i>2"
                        class="hotWord"
                        v-for="(t,i) in searchtxt" :key="i" 
                    >{{t}}</span>
                </div>
           </div>

           <!-- 搜索之后 -->
           <div v-show="!showbottom">
                <div class="search-leater">
                    <span class="leater-img"></span>
                   <span class="seara-text">搜索历史</span>
                </div> 
                <!-- 搜索历史 -->
                <div>
                    <p class="lishi" v-for="(l,i) in lishi" :key="i">
                        <span class="leater-img"></span>
                        <span>{{l}}</span>
                    </p>
                </div>
                 <!-- 清除历史记录 -->
                <div class="clear-box"
                     v-if="lishi.length>0"
                     @click="eliminate"
                ><span>清除历史记录</span></div>
           </div>
          
        </div>
        
    </div>
</template>
    
<script>
export default {
    data(){
        return{
            searchtxt:["橘子","橙子","树莓","椰子","苹果","提子","葡萄","无花果","香蕉"],
            showbottom:true,
            txt:null,
            lishi:[],
        }
    },    
    methods:{
        pressClick(){
            history.back();
        },
        isShow(){
            this.showbottom =false;
        },
        shuru(){
            let index = this.lishi.indexOf(this.txt);
            if(index==-1){
                this.lishi.push(this.txt);
            }            
        },
        eliminate(){
            this.lishi =[];
        }
    },
   
};
</script>
    
<style scoped>
.search-root {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100vw;

}
.search-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2vw 4vw;
    height: 15vw;
}
.search-let img{
vertical-align: middle;
width:7.5vw;
}
.search-let input{
    margin-left: 2vw;
    width: 65vw;
    height: 10vw;
    font-size:5vw;
    border: none;
    color: #808992;
}
.cancel{
    cursor: pointer;
    color: #333333;
    font-size: 4.8vw;
}
.search-bottom{
    margin-top: 5vw;
    padding: 0 3vw;
}
.search-before{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.searb-text{
    font-size: 5vw;
    color: #333333;
}
.searb-img{
background-image: url('/img/search/资源2@2x-8.png');
}
.leater-img{
    background-image: url('/img/search/资源1@2x-8.png');
}
.searb-img ,.leater-img{
    width: 5vw;
    height: 5vw;    
    background-size: 100% 100%;
    vertical-align: middle;
}
.search-befor-bottom{
    display: flex;
    margin-top: 4vw;
    /* border: 1px solid aqua; */
    flex-wrap: wrap;
}
.hotWord{
    margin-right: 3.5vw;
    margin-bottom: 2vw;
    font-size: 4.5vw;
    padding: 0 3vw;
    height: 10vw;
    border-radius: 1vw;
    text-align: center;
    line-height: 10vw;
    color: #393d40;
    background-color:rgba(88 , 92, 95, 0.1)
}
.dandu{
    background-color: rgba(237, 68, 73, 0.1);
    color: #ed4449;
     margin-right: 3.5vw;
    margin-bottom: 2vw;
    font-size: 4.5vw;
    padding: 0 3vw;
    height: 10vw;
    border-radius: 1vw;
    text-align: center;
    line-height: 10vw;
}
.seara-text{
    margin-left: 1vw;
    color: #333333;
    font-size: 3.5vw;
}
.search-leater{
    /* height: 10vw; */
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 2vw;
}
.lishi{
    height: 10vw;
    line-height: 10vw;
    border-bottom: 1px solid #e6e6e6;
}
.clear-box{
    text-align: center;
    margin-top: 1vw;
}
.clear-box span{
    color: #ed4449;
    font-size: 5vw;
    cursor: pointer;
}
</style>